<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 输入框 -->
    <el-row>
      <el-col :span="5">
        <el-button type="primary">添加分类</el-button>
      </el-col>
    </el-row>
    <el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      row-key="cat_id"
      border
      :default-expand-all="expand"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column
        width="180"
        type="index"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
      </el-table-column>
      <!-- ============= -->
      <el-table-column prop="cat_name" label="商品分类" width="180">
      </el-table-column>
      <el-table-column prop="cat_deleted" label="是否有效" width="180">
      </el-table-column>
      <el-table-column prop="cat_level" label="排序"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <div class="btns">
            <el-button
              icon="el-icon-edit"
              size="mini"
              type="primary"
              @click="openDialog('edit', scope.row.id)"
            ></el-button>
            <el-button
              icon="el-icon-delete"
              size="mini"
              type="danger"
              @click="openDialog('del', scope.row.id)"
            ></el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { goodsortAPI } from '@/api/goods.js'
export default {
  name: '',
  data () {
    return {
      tableData: [],
      expand: false,
      //查询条件
      queryinfo: {
        type: 3,
        pagenum: 1,
        pagesize: 5
      }
    }
  },
  created () {
    this.initData()
  },
  computed: {
  },
  methods: {
    async initData () {
      const res = await goodsortAPI()
      console.log(res, 'iiiii');
      this.tableData = res.data
    }
  }
}
</script>
<style lang='less'  scoped>
.el-row {
  margin: 20px 0;
}
</style>
